<!-- 实践是可以的 -->
<!DOCTYPE html>
<html lang="z-ch">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>下载</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <a v-if="!isFirefox" @click.stop.prevent="handleDownloadQrIMg" class="qrcode">
        <img :src="qrBase64">
      </a>
      <a v-if="isFirefox" :href="prefixBase64 + qrBase64" download="qrcode.png" class="qrcode">
        <img :src="qrBase64">
      </a>
    </div>
    <script>
      var app = new Vue({
        el: '#app',
        data() {
          return {
            qrBase64:
              '', // 二维码对应的base64（在方法里面进行获取）
            // prefixBase64: 'data:image/png;base64,', // base64前缀
            prefixBase64: '', // 假如本身存在base64前缀，就不用前缀了。
            isFirefox: false
          }
        },
        mounted() {
          // 判断浏览器是否是火狐
          if (navigator.userAgent.indexOf('Firefox') > 0) {
            this.isFirefox = true
          }
        },
        methods: {
          // 点击下载图片
          handleDownloadQrIMg() {
            // 这里是获取到的图片base64编码,这里只是个例子哈，要自行编码图片替换这里才能测试看到效果
            // const imgUrl = this.prefixBase64 + this.qrBase64
            const imgUrl = this.prefixBase64 + this.qrBase64
            // 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候），那么调用该方法去下载图片
            if (window.navigator.msSaveOrOpenBlob) {
              let bstr = atob(imgUrl.split(',')[1])
              let n = bstr.length
              let u8arr = new Uint8Array(n)
              while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
              }
              let blob = new Blob([u8arr])
              window.navigator.msSaveOrOpenBlob(blob, 'qrcode' + '.' + 'png')
            } else {
              // 这里就按照chrome等新版浏览器来处理
              let a = document.createElement('a')
              a.href = imgUrl
              a.setAttribute('download', 'qrcode')
              a.click()
            }
          }
        }
      })
    </script>
  </body>
</html>
